<script setup>
// const props = withDefaults(defineProps<Props>(), {
//   value: 1,
//   max: 999999999,
//   min: 1,
//   readonly: false,
//   size: 'middle',
// })

const props = defineProps({
  value: {
    type: Number,
    default: 1,
  },
  max: {
    type: Number,
    default: 999999999,
  },
  min: {
    type: Number,
    default: 1,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String,
    default: 'middle',
  },
})
const emit = defineEmits(['update:value', 'change'])
const test = ref(1)
// 使用计算属性来处理值的更新
const currentValue = computed({
  get: () => props.value,
  set: (newValue) => {
    // 确保值在范围内
    const validatedValue = Math.min(Math.max(newValue, props.min), props.max)
    emit('update:value', validatedValue)
    emit('change', validatedValue)
  },
})

// 处理增减操作
function handleIncrement() {
  if (currentValue.value < props.max) {
    currentValue.value += 1
  }
}

function handleDecrement() {
  if (currentValue.value > props.min) {
    currentValue.value -= 1
  }
}
</script>

<template>
  <div class="number-input-wrapper space-x-2">
    <n-button
      :disabled="currentValue <= min"
      @click="handleDecrement"
    >
      -
    </n-button>
    <n-input-number
      v-model:value="currentValue"
      :min="min"
      :max="max"
      :readonly="readonly"
      class="text-center !w-[30%]"
      :show-button="false"
      :bordered="false"
    >
    </n-input-number>
    <n-button
      :disabled="currentValue >= max"
      @click="handleIncrement"
    >
      +
    </n-button>
  </div>
</template>

<style scoped lang="scss">
.number-input-wrapper {
  display: inline-flex;
  align-items: center;
}

.number-input {
  :deep(.ant-input-number-input) {
    text-align: center;
  }
}
</style>
